/**
 * Layui 搜索输入框组件
 *
 * @author xiaolai
 * @since 20190510
 *
 */
layui.define(['table', 'jquery', 'form'], function(exports) {
    var $ = layui.$, baseClassName = 'layui-input-search',MOD_NAME = 'searchInput',
        table = layui.table,
        form = layui.form,
        style = ['<style type="text/css">',
            '.', baseClassName, '  {  }',
            '.', baseClassName, ' .layui-key-btn { position: absolute;right: 10px;top: 40%;margin-top: -3px;cursor: pointer; }',
            '</style>'].join('');

    $('head link:last')[0] && $('head link:last').after(style) || $('head').append(style);
    var obj = {
        get: function(filter){
            if (!filter) {
                layui.hint().error('filter 不能为空');
            }
            return $('*[lay-filter='+ filter +']');
        }
    };
    var searchInput = function () {}
    searchInput.prototype = {
        render:function(opt){
            var searchDone = opt.done || function(){};
            var tableDone = opt.table.done || function(){};
            var elem=$(opt.dst);
            var event={
                setVal: function(key,value) {
                    $(this).prev().val(value);
                    $(this).parent().parent().prev().val(key);
                }
            };
            var layVerify=elem.attr("lay-verify");
            var name=elem.attr("name");
            elem.removeAttr("lay-verify")
            var html = ['<div class="layui-unselect layui-form-select"  style="cursor:pointer;">',
                '   <div class="'+baseClassName+'">',
                '       <input type="text" name="'+name+'" readonly="readonly" lay-verify="'+layVerify+'" name="'+opt.inputName+'" placeholder="" value="" style="cursor: auto;" class="layui-input layui-unselect">',
                '           <i class="layui-icon layui-icon-search layui-key-btn" layfiltername="'+opt.layFilter+'"></i>',
                '   </div>',
                '</div>'].join('');
             //elem.after(html);
             var parent= elem.parent();
             elem.replaceWith(html)//：A替换B
            parent.on('click', function(e) {
                // typeof click === 'function' && click.call(event.setVal);
                e.stopPropagation();
                if($('div.propSelect').length >= 1){
                    return false;
                }
                var layFilterName=$(this).attr("layfiltername");
                var tableName = "propSelect_table_" + new Date().getTime();
                var tableBox = '<div class="propSelect layui-anim layui-anim-upbit" style="width:99%;height:95%;padding: 3px">';
                tableBox += '<div class="propSelectBar">';
                tableBox += '<form class="layui-form" action="" style="display:inline-block;">';
                tableBox += '<input style="display:inline-block;width:190px;height:30px;vertical-align:middle;margin-right:-1px;border: 1px solid #C9C9C9;" type="text" name="'+opt.searchKey+'" placeholder="'+opt.searchPlaceholder+'" autocomplete="off" class="layui-input"><button class="layui-btn layui-btn-sm layui-btn-primary tableSelect_btn_search" lay-submit lay-filter="tableSelect_btn_search"><i class="layui-icon layui-icon-search"></i></button>';
                tableBox += '</form>';
                tableBox += '<button style="float:right;" class="layui-btn layui-btn-sm tableSelect_btn_select" layFilterName="'+layFilterName+'">选择<span></span></button>';
                tableBox += '</div>';
                tableBox += '<table id="'+tableName+'" lay-filter="'+tableName+'"></table>';
                tableBox += '</div>';
                tableBox = $(tableBox);
                $('body').append(tableBox);
                var propConfig={
                    type: 1,
                    area: [($(window).width()*0.5)+'px', ($(window).height() *0.85)+'px'],
                    //shadeClose: false,
                    closeBtn:1,
                    success: $.noop,
                    cancel:$.noop,
                    title:'弹出窗口',
                    content: $(".propSelect"),
                    end:function () {
                        tableBox.remove();
                    }
                }
                layer.open($.extend(propConfig,opt.windows));


                var tableConfig={
                    request: common.layui.table.tableRequest
                    , page: true
                    ,height: ($(window).height() *0.72)+'px'
                    ,cellMinWidth: 80 //全局定义常规单元格的最小宽度，layui 2.2.1 新增
                    ,parseData: common.layui.table.tableParseData
                    ,done: function () {
                        layer.closeAll('loading');
                    }
                }
                //数据缓存
                var checkedData = [];

                //渲染TABLE
                opt.table.elem = "#"+tableName;
                opt.table.id = tableName;
                opt.table.done = function(res, curr, count){
                    defaultChecked(res, curr, count);
                    setChecked(res, curr, count);
                    tableDone(res, curr, count);
                };
                var tableSelect_table = table.render($.extend(tableConfig,opt.table));

                //分页选中保存数组
                table.on('radio('+tableName+')', function(obj){
                    if(opt.checkedKey){
                        checkedData = table.checkStatus(tableName).data
                    }
                    updataButton(table.checkStatus(tableName).data.length)
                })
                table.on('checkbox('+tableName+')', function(obj){
                    if(opt.checkedKey){
                        if(obj.checked){
                            for (var i=0;i<table.checkStatus(tableName).data.length;i++){
                                checkedData.push(table.checkStatus(tableName).data[i])
                            }
                        }else{
                            if(obj.type=='all'){
                                for (var j=0;j<table.cache[tableName].length;j++) {
                                    for (var i=0;i<checkedData.length;i++){
                                        if(checkedData[i][opt.checkedKey] == table.cache[tableName][j][opt.checkedKey]){
                                            checkedData.splice(i,1)
                                        }
                                    }
                                }
                            }else{
                                //因为LAYUI问题，操作到变化全选状态时获取到的obj为空，这里用函数获取未选中的项。
                                function nu (){
                                    var noCheckedKey = '';
                                    for (var i=0;i<table.cache[tableName].length;i++){
                                        if(!table.cache[tableName][i].LAY_CHECKED){
                                            noCheckedKey = table.cache[tableName][i][opt.checkedKey];
                                        }
                                    }
                                    return noCheckedKey
                                }
                                var noCheckedKey = obj.data[opt.checkedKey] || nu();
                                for (var i=0;i<checkedData.length;i++){
                                    if(checkedData[i][opt.checkedKey] == noCheckedKey){
                                        checkedData.splice(i,1);
                                    }
                                }
                            }
                        }
                        checkedData = uniqueObjArray(checkedData, opt.checkedKey);
                        updataButton(checkedData.length)
                    }else{
                        updataButton(table.checkStatus(tableName).data.length)
                    }
                });

                //渲染表格后选中
                function setChecked (res, curr, count) {
                    for(var i=0;i<res.data.length;i++){
                        for (var j=0;j<checkedData.length;j++) {
                            if(res.data[i][opt.checkedKey] == checkedData[j][opt.checkedKey]){
                                res.data[i].LAY_CHECKED = true;
                                var index= res.data[i]['LAY_TABLE_INDEX'];
                                var checkbox = $('#'+tableName+'').next().find('tr[data-index=' + index + '] input[type="checkbox"]');
                                checkbox.prop('checked', true).next().addClass('layui-form-checked');
                                var radio  = $('#'+tableName+'').next().find('tr[data-index=' + index + '] input[type="radio"]');
                                radio.prop('checked', true).next().addClass('layui-form-radioed').find("i").html('&#xe643;');
                            }
                        }
                    }
                    var checkStatus = table.checkStatus(tableName);
                    if(checkStatus.isAll){
                        $('#'+tableName+'').next().find('.layui-table-header th[data-field="0"] input[type="checkbox"]').prop('checked', true);
                        $('#'+tableName+'').next().find('.layui-table-header th[data-field="0"] input[type="checkbox"]').next().addClass('layui-form-checked');
                    }
                    updataButton(checkedData.length)
                }

                //写入默认选中值(puash checkedData)
                function defaultChecked (res, curr, count){

                    if(opt.checkedKey && elem.val()){
                        var selected = elem.val().split(",");
                        for(var i=0;i<res.data.length;i++){
                            for(var j=0;j<selected.length;j++){
                                if(res.data[i][opt.checkedKey] == selected[j]){
                                    checkedData.push(res.data[i])
                                }
                            }
                        }
                        checkedData = uniqueObjArray(checkedData, opt.checkedKey);
                    }
                }

                //更新选中数量
                function updataButton (n) {
                    tableBox.find('.tableSelect_btn_select span').html(n==0?'':'('+n+')')
                }

                //数组去重
                function uniqueObjArray(arr, type){
                    var newArr = [];
                    var tArr = [];
                    if(arr.length == 0){
                        return arr;
                    }else{
                        if(type){
                            for(var i=0;i<arr.length;i++){
                                if(!tArr[arr[i][type]]){
                                    newArr.push(arr[i]);
                                    tArr[arr[i][type]] = true;
                                }
                            }
                            return newArr;
                        }else{
                            for(var i=0;i<arr.length;i++){
                                if(!tArr[arr[i]]){
                                    newArr.push(arr[i]);
                                    tArr[arr[i]] = true;
                                }
                            }
                            return newArr;
                        }
                    }
                }

                //FIX位置
                //var overHeight = (elem.offset().top + elem.outerHeight() + tableBox.outerHeight() - $(window).scrollTop()) > $(window).height();
               // var overWidth = (elem.offset().left + tableBox.outerWidth()) > $(window).width();
               // overHeight && tableBox.css({'top':'auto','bottom':'0px'});
               // overWidth && tableBox.css({'left':'auto','right':'5px'})

                //关键词搜索
                form.on('submit(tableSelect_btn_search)', function(data){
                    var data=data.field;
                    tableSelect_table.reload({
                        where: data,
                        page: {
                            curr: 1
                        }
                    });
                    return false;
                });

                //双击行选中
                table.on('rowDouble('+tableName+')', function(obj){
                    var checkStatus = {data:[obj.data]};
                    selectDone(checkStatus,tableBox.find('.tableSelect_btn_select').attr("layfiltername"));
                })

                //按钮选中
                tableBox.find('.tableSelect_btn_select').on('click', function() {
                    var checkStatus = table.checkStatus(tableName);
                    if(checkedData.length > 1){
                        checkStatus.data = checkedData;
                    }
                    debugger
                    var layFilterName=$(this).attr("layfiltername");
                    selectDone(checkStatus,layFilterName);
                })

                //写值回调和关闭
                function selectDone (checkStatus,layFilterName){
                    var input=obj.get(layFilterName);
                    console.log(layFilterName)
                    if(opt.checkedKey){
                        var selected = [];
                        var NEWJSON=[];
                        for(var i=0;i<checkStatus.data.length;i++){
                            selected.push(checkStatus.data[i][opt.checkedKey])
                            NEWJSON.push(checkStatus.data[i][opt.checkedName])
                        }

                        input.val(selected.join(","));
                        input.next().find('input').val(NEWJSON.join(","));
                    }
                    searchDone(input, input.next(),checkStatus.data);
                    layer.close(layer.index); //它获取的始终是最新弹出的某个层，值是由layer内部动态递增计算的
                    delete table.cache[tableName];
                    checkedData = [];

                }
                /*
                //点击其他区域关闭
                $(document).mouseup(function(e){
                    var userSet_con = $(''+opt.elem+',.propSelect');
                    if(!userSet_con.is(e.target) && userSet_con.has(e.target).length === 0){
                        layer.close(layer.index)

                        delete table.cache[tableName];
                        checkedData = [];
                    }
                });*/
            })
        },setVal(filter,data){
            var input=obj.get('');
            input.val(data.value);
            input.next().find('input').val(data.text);

        }
    }
    var i = new searchInput();
    exports(MOD_NAME, i);
});
